<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios-案例</title>

</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in empList">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span>{{emp.gender === 1? '男' : '女'}}</span>
                   <!-- <span>女</span>-->
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data() {
            return {
                // 定义员工列表，默认为空
                empList: []
            };
           },
           mounted() {
            let _this = this;
            // 发送请求，获取服务器数据
            axios.get("https://console-mock.apipost.cn/mock/1faf4ce6-e507-45af-9240-13367545a76b/emp/list")
            .then(resp=>{
                let data = resp.data.data;
                console.log(data);
                // 把响应的数据赋值给data模型中的empList
                // _this.empList = data;// 如果使用匿名函数，此处不能使用this。因为这个函数并不是vue回调的。
                this.empList = data;// 如果使用箭头函数，此处的this指的就是vue对象。
            });
           }
        });
    </script>
</body>

</html>